<template>
	<view class="surroundings">
		<!-- 周边 -->
		<view class="surroundingsSwiper">
			<u-swiper :list="swiperList" keyName="photo" previousMargin="30" nextMargin="30" circular :autoplay="true"
				radius="5" bgColor="#ffffff" height="160" @click="goSwiper"></u-swiper>
		</view>
		<view class="impression">
			<view class="impressionT">
				<h2>雪国崇礼</h2>
			</view>
			<view class="surroundingsDiv">
				<view class="surroundingsDivL" @click="goCard">
					<img src="/static/zbcs.jpg" alt="" />
					<view class="surroundingsDivLCS">
						城市名片
					</view>
				</view>
				<view class="surroundingsDivR" @click="goGallivant">
					<img src="/static/zbfj.jpg" alt="" />
					<view class="surroundingsDivLCS">
						风景名胜
					</view>
				</view>
			</view>
		</view>
		<view class="impression impressionD">
			<view class="impressionT">
				<h2>崇礼这么玩</h2>
			</view>
			<view class="impressionDiv">
				<view class="impressionList" :style="item.type !='攻略'?'height: 400rpx':''"
					v-for="(item,index) in strategyList" :key="index" @click="goDetails(item)">
					<img :src="item.photo[0]" alt="" />
					<view class="impressionListJ" v-if="item.type !='攻略'">
						<p>{{item.title}}</p>
						<view class="impressionListJI" v-if="item.distanceKm">
							<img src="/static/home/juli.png" alt="" />
							<span>{{item.distanceKm}}km</span>
						</view>
					</view>
					<view class="impressionListI" v-else>
						<p>{{item.title}}</p>
						<view class="impressionListII">
							<img v-if="item.profilePhoto" :src="item.profilePhoto" alt="" />
							<span v-if="item.nickName">{{item.nickName}}</span>
						</view>
					</view>
					<view class="impressionListB">
						{{item.type}}
					</view>
				</view>
			</view>
			<view class="load-more" v-if="showLoading">
				<text>滑动到底部加载更多</text>
			</view>
			<view class="load-more" v-if="showNoMore">
				<text>没有更多数据了</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		slideshow
	} from '@/api/home.js'
	import {
		strategyList
	} from '@/api/surroundings.js'
	export default {
		data() {
			return {
				swiperList: [],
				pageNum: 1, // 当前页码
				pageSize: 10, // 每页条数
				total: 0, // 总数据量
				isLoading: false, // 是否正在加载
				showLoading: false, // 显示加载中
				showNoMore: false, // 显示没有更多
				strategyList: [],
				surroundingsType: ''
			};
		},
		onShow() {
			this.surroundingsType = uni.getStorageSync('surroundingsType')
			this.getStrategyList();
			if (this.surroundingsType == 1) {
				this.scrollToTarget();
			}
			this.getSlideshow()
		},
		onHide() {
			uni.removeStorageSync('surroundingsType')
		},
		// 页面滚动到底部
		onReachBottom() {
			// 页面滚动到底部时触发
			if (this.strategyList.length < this.total) {
				this.pageSize += 10;
				this.getStrategyList();
			} else if (this.strategyList.length >= this.total) {
				this.showNoMore = true;
				this.showLoading = false;
			}
		},
		methods: {
			// 点击轮播图
			goSwiper(e) {
				uni.navigateTo({
					url: `/pages/scenicAreaDetails/scenicAreaDetails?id=${this.swiperList[e].id}&type=0`
				})
			},
			// 获取轮播图数据
			async getSlideshow() {
				let arr = []
				let res = await slideshow()
				if (res.code == 200) {
					res.data.forEach(str => {
						arr.push({
							id: str.id,
							photo: str.photo[0]
						})
					})
					this.swiperList = arr
				}
			},
			// 获取页面滚动位置（封装为 Promise）
			getScrollPosition() {
				return new Promise((resolve) => {
					uni.createSelectorQuery().in(this)
						.selectViewport().scrollOffset(data => {
							resolve(data.scrollTop);
						}).exec();
				});
			},
			scrollToTarget() {
				// 1. 获取目标元素位置
				const query = uni.createSelectorQuery().in(this);
				query.select('.impressionD').boundingClientRect(async (data) => {
					if (data) {
						// 2. 获取当前滚动位置（使用上面封装的方法）
						const currentScrollTop = await this.getScrollPosition();

						// 3. 计算需要滚动的总距离
						const scrollTop = currentScrollTop + data.top;

						// 4. 滚动到目标位置
						uni.pageScrollTo({
							scrollTop: scrollTop,
							duration: 300
						});
					}
				}).exec();
			},
			// 跳转到详情
			goDetails(item) {
				if (item.type == '攻略') {
					uni.navigateTo({
						url: `/pages/strategyDetails/strategyDetails?id=${item.id}`
					})
				} else if (item.type == '景区') {
					uni.navigateTo({
						url: `/pages/scenicAreaDetails/scenicAreaDetails?id=${item.id}&type=0`
					})
				} else if (item.type == '酒店') {
					uni.navigateTo({
						url: `/pages/scenicAreaDetails/scenicAreaDetails?id=${item.id}&type=1`
					})
				} else if (item.type == '美食') {
					uni.navigateTo({
						url: `/pages/scenicAreaDetails/scenicAreaDetails?id=${item.id}&type=2`
					})
				}
			},
			// 跳转到风景名胜
			goGallivant() {
				uni.navigateTo({
					url: '/pages/gallivant/gallivant?type=0'
				})
			},
			// 获取攻略列表
			async getStrategyList() {
				let lon = this.$store.state.lonLat[0]
				let lat = this.$store.state.lonLat[1]
				// 显示加载状态
				this.isLoading = true;
				this.showLoading = true;
				this.showNoMore = false;
				let par = {
					lon: lon ? lon : null,
					lat: lat ? lat : null,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				let res = await strategyList(par)
				if (res.code == 200) {
					const newData = res.data.list;
					this.total = res.data.total;
					// 合并数据
					if (this.pageNum == 1) {
						this.strategyList = newData;
					} else {
						this.strategyList = this.strategyList.concat(newData);
					}
					// 控制显示状态
					if (this.strategyList.length >= this.total) {
						this.showNoMore = true;
						this.showLoading = false;
					} else {
						this.showNoMore = false;
						this.showLoading = true;
					}
				} else {
					this.isLoading = false;
					this.showLoading = false;
				}
			},
			goCard() {
				uni.navigateTo({
					url: '/pages/surroundings/card'
				})
			}
		}
	}
</script>

<style lang="scss">
	.surroundings {
		width: 100%;
		min-height: 100vh;

		.impressionD {
			.impressionDiv {
				margin-top: 20rpx;
				width: 100%;
				// display: flex;
				// flex-wrap: wrap;
				// justify-content: space-between;
				column-count: 2;

				.impressionList {
					width: 100%;
					margin-bottom: 20rpx;
					position: relative;
					break-inside: avoid; // 防止内容被分割到不同列

					.impressionListB {
						font-size: 22rpx;
						position: absolute;
						right: 0;
						top: 0;
						background-color: #ffffff;
						border-radius: 0 10rpx 0 20rpx;
						padding: 5rpx;
						color: #666;
					}

					.impressionListI {

						.impressionListII {
							display: flex;
							align-items: center;
							margin-top: 10rpx;
							padding: 0 10rpx;
							gap: 10rpx;
							font-size: 24rpx;
							color: #666;

							img {
								width: 40rpx;
								height: 40rpx;
								border-radius: 50%;
							}
						}

						p {
							font-size: 26rpx;
							font-weight: bold;
						}
					}

					.impressionListJ {
						width: 100%;
						position: absolute;
						left: 0;
						bottom: 0;
						padding: 10rpx;
						background: rgba(255, 255, 255, 0.2);
						backdrop-filter: blur(10rpx);
						-webkit-backdrop-filter: blur(10rpx);
						border-radius: 0 0 20rpx 20rpx;
						color: #ffffff;

						.impressionListJI {
							display: flex;
							align-items: center;

							img {
								width: 40rpx;
								height: 40rpx;
							}

							span {
								font-size: 22rpx;
							}
						}

						p {
							font-size: 26rpx;
						}


					}

					img {
						width: 100%;
						height: 400rpx;
						border-radius: 20rpx;
					}
				}
			}

			.load-more {
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				color: #666;
			}

			/* 加载动画 */
			.loading-spinner {
				width: 30rpx;
				height: 30rpx;
				border: 3rpx solid #ccc;
				border-top-color: #333;
				border-radius: 50%;
				animation: spin 1s linear infinite;
				margin-right: 16rpx;
			}

			@keyframes spin {
				to {
					transform: rotate(360deg);
				}
			}
		}

		.impression {
			padding: 0 30rpx;
			margin-top: 30rpx;

			.surroundingsDiv {
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				justify-content: space-between;

				.surroundingsDivR {
					width: 38%;
					height: 300rpx;
					position: relative;

					.surroundingsDivLCS {
						width: 100%;
						padding: 10rpx 20rpx;
						position: absolute;
						background: rgba(255, 255, 255, 0.2);
						backdrop-filter: blur(10rpx);
						-webkit-backdrop-filter: blur(10rpx);
						border-radius: 0 0 20rpx 20rpx;
						bottom: 0;
						left: 0;
						color: #ffffff;
						font-weight: bold;
						font-size: 26rpx;
					}

					img {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}
				}

				.surroundingsDivL {
					width: 60%;
					height: 300rpx;
					position: relative;

					.surroundingsDivLCS {
						width: 100%;
						padding: 10rpx 20rpx;
						position: absolute;
						background: rgba(255, 255, 255, 0.2);
						backdrop-filter: blur(10rpx);
						-webkit-backdrop-filter: blur(10rpx);
						border-radius: 0 0 20rpx 20rpx;
						bottom: 0;
						left: 0;
						color: #ffffff;
						font-weight: bold;
						font-size: 26rpx;
					}

					img {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}
				}

			}

			.impressionT {
				font-size: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				h2 {
					font-weight: bold;
				}
			}
		}
	}
</style>